<template>
    <div id="picture_manage">
        <div class="container">
            <div class="handle-box">
                <el-checkbox v-model="query.checked" @change="handleStatusChange" style="margin-bottom: 18px; margin-right: 20px">
                    <!-- 待审核 -->
                    {{ $t('m.daiShenHeTick') }}
                </el-checkbox>

                <el-button type="primary" style="margin-bottom: 18px" @click="uploadImage">上传图片</el-button>

                <el-form ref="form" :inline="true">
                    <el-form-item label="">
                        <el-input
                            v-model="query.id"
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            placeholder="ID"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input
                            v-model="query.updateBy"
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            placeholder="操作者"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="query.source" clearable @change="handleSearch" placeholder="来源" class="handle-select mr10">
                            <el-option key="1" label="合作伙伴" :value="1"></el-option>
                            <el-option key="2" label="国外免费网站" :value="2"></el-option>
                            <el-option key="3" label="国内免费网站" :value="3"></el-option>
                            <el-option key="4" label="个人原创" :value="4"></el-option>
                            <el-option key="5" label="其他" :value="5"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="">
                        <el-select
                            v-model="query.format"
                            clearable
                            @change="handleSearch"
                            placeholder="图片格式"
                            class="handle-select mr10"
                        >
                            <el-option key="1" label="jpg" value="jpg"></el-option>
                            <el-option key="2" label="png" value="png"></el-option>
                            <el-option key="3" label="jpeg" value="jpeg"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select
                            v-model="query.status"
                            clearable
                            @change="handleSearch"
                            placeholder="是否可用"
                            class="handle-select mr10"
                        >
                            <el-option key="1" label="可用" :value="1"></el-option>
                            <el-option key="2" label="暂不可用" :value="0"></el-option>
                            <el-option key="-1" label="禁止使用" :value="-1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" :disabled="disabled" @click="handleSearch">
                            <!-- 查询 -->
                            {{ $t('m.queryBtn') }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="ID" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="图片预览" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="scope.row.filePath ? `${baseUrl}/api/stream/audio?path=${scope.row.filePath}` : ''"
                            :preview-src-list="[scope.row.filePath ? `${baseUrl}/api/stream/audio?path=${scope.row.filePath}` : '']"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="图片来源" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{
                        scope.row.source === 1
                            ? '合作伙伴'
                            : scope.row.source === 2
                            ? '国外免费网站'
                            : scope.row.source === 3
                            ? '国内免费网站'
                            : scope.row.source === 4
                            ? '个人原创'
                            : scope.row.source === 5
                            ? '其他'
                            : ''
                    }}</template>
                </el-table-column>

                <el-table-column label="备注" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.remark }}</template>
                </el-table-column>

                <el-table-column label="图片格式" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.format }}</template>
                </el-table-column>

                <el-table-column label="操作者" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.updateBy }}</template>
                </el-table-column>
                <el-table-column label="更新时间" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                </el-table-column>

                <el-table-column label="是否可用" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-select placeholder="是否可用" style="width: 100%; height: 100%" v-model="scope.row.status">
                            <el-option key="1" label="可用" :value="1"></el-option>
                            <el-option key="2" label="暂不可用" :value="0"></el-option>
                            <el-option key="3" label="禁止使用" :value="-1"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column width="225" label="管理" align="center">
                    <template slot-scope="scope">
                        <el-button
                            :disabled="scope.row.editFlag === -1"
                            @click="handleEdit(scope.$index, scope.row)"
                            v-if="!query.show"
                            type="primary"
                            size="mini"
                        >
                            <!-- 编辑 -->
                            {{ $t('m.editBtn') }}
                        </el-button>

                        <el-button @click="handleChecked(scope.$index, scope.row)" v-if="query.show" type="warning" size="mini"
                            >审核</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑、审核弹出框 -->
        <el-dialog title="编辑" :visible.sync="visible" width="30%">
            <el-form ref="form" :model="form" label-width="100px" :rules="rules">
                <el-form-item label="图片id">
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <!-- <el-input v-model="form.address"></el-input> -->
                    <el-image
                        :style="{ display: 'block', margin: '0', width: '120px', height: '120px' }"
                        :src="form.filePath"
                        :preview-src-list="[form.filePath]"
                    ></el-image>
                </el-form-item>

                <el-form-item label="来源">
                    <el-select v-model="form.source" class="" style="width: 100%" clearable>
                        <el-option key="1" label="合作伙伴" :value="1"></el-option>
                        <el-option key="2" label="国外免费网站" :value="2"></el-option>
                        <el-option key="3" label="国内免费网站" :value="3"></el-option>
                        <el-option key="4" label="个人原创" :value="4"></el-option>
                        <el-option key="5" label="其他" :value="5"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="标签：" prop="tagIds">
                    <div class="block">
                        <el-cascader
                            :show-all-levels="false"
                            v-model="form.tagIds"
                            class="w"
                            :options="tagList"
                            :props="{
                                emitPath: false,
                                multiple: true,
                                checkStrictly: true,
                                value: 'value',
                                label: 'label',
                                children: 'children'
                            }"
                            @change="handlechange"
                        >
                            <template slot-scope="{ node, data }">
                                <span>{{ data.label }}</span>
                                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                            </template>
                        </el-cascader>
                    </div>
                </el-form-item>

                <el-form-item label="是否可用" prop="status">
                    <el-select v-model="form.status" class="" style="width: 100%" clearable>
                        <el-option key="1" label="可用" :value="1"></el-option>
                        <el-option key="2" label="暂不可用" :value="0"></el-option>
                        <el-option key="-1" label="禁止使用" :value="-1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button v-if="query.show" type="default" @click="handleRefuse">拒绝</el-button>
                <el-button
                    v-if="query.show"
                    type="primary"
                    :disabled="
                        checkRequire({
                            tagIds: form.tagIds,
                            status: form.status
                        })
                    "
                    @click="handlePass"
                    >通过</el-button
                >

                <el-button v-if="!query.show" @click="visible = false">取消</el-button>
                <el-button
                    v-if="!query.show"
                    type="primary"
                    :disabled="
                        checkRequire({
                            tagIds: form.tagIds,
                            status: form.status
                        })
                    "
                    @click="submitChecked"
                    >提交审核</el-button
                >
            </span>
        </el-dialog>

        <!-- 上传图片弹出框 -->
        <el-dialog title="上传图片" :visible.sync="visible_img" width="30%">
            <el-form ref="form" :model="form" label-width="100px" :rules="rules">
                <el-form-item label="来源" prop="source">
                    <el-select v-model="form.source" class="" style="width: 100%" clearable>
                        <el-option key="1" label="合作伙伴" :value="1"></el-option>
                        <el-option key="2" label="国外免费网站" :value="2"></el-option>
                        <el-option key="3" label="国内免费网站" :value="3"></el-option>
                        <el-option key="4" label="个人原创" :value="4"></el-option>
                        <el-option key="5" label="其他" :value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传文件" prop="images" class="uploadFile">
                    <!-- v-model="form.images.length" -->
                    <el-input disabled :value="count ? '共上传 ' + count + ' 张' : ''" placeholder="请上传图片"></el-input>
                    <a href="javascript:void(0)" class="btn">
                        点击上传
                        <input accept="image/*" type="file" multiple id="file" name="file" @change="handleUploadFile($event)" />
                    </a>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="form.remark" style="width: 100%" clearable></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="visible_img = false">取消</el-button>
                <el-button
                    type="primary"
                    :disabled="
                        checkRequire({
                            source: form.source,
                            images: form.images + ''
                        })
                    "
                    @click="handleConfirm"
                    >确认</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
  import NProgress from 'nprogress';
  import { debounce, throttle } from '@/utils/utils.js';
  import { mapGetters, mapMutations, mapActions } from 'vuex';
  import axios from 'axios';
  export default {
      name: 'PictureManage',
      data() {
          return {
              disabled: false,
              rules: {
                  images: [{ required: true, message: '请上传图片', trigger: 'blur' }],
                  source: [{ required: true, message: '请选择来源', trigger: 'change' }],
                  tagIds: [{ required: true, message: '请选择标签', trigger: 'change' }],
                  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
              },
              tagList: [],
              form: {},
              count: '',
              visible: false,
              visible_img: false,
              baseUrl: process.env.VUE_APP_SRC1
              // query: {
              //     pageIndex: 1,
              //     pageSize: 10,
              //     id: null,
              //     updateBy: null,
              //     source: null,
              //     format: null,
              //     status: null
              // }
              // tableData: [],
              // pageTotal: 0
          };
      },
      watch: {
          $route: {
              deep: true,
              immediate: true,
              handler(a, b) {
                  console.log(a, b);
                  if (a.name === 'PictureManage') {
                      this.getData();
                  }
              }
          }
      },
      computed: {
          ...mapGetters({
              pageTotal: 'pictureManagePageTotal',
              tableData: 'pictureManageData',
              query: 'pictureManageQuery',
              tagsList: 'tagsList'
          })
      },
      methods: {
          handleUploadFile(e) {
              var event = e || window.event;
              var target = event.target || e.srcElement;
              this.form.images = target.files;
              this.count = target.files.length;
              console.log(this.form);
          },
          // 上传图片
          uploadImage() {
              this.visible_img = true;
              this.count = '';
              this.form = {};
          },
          // 表单提交：截流处理, 不用防抖处理是因为一直点击时 弹框不会隐藏
          handleConfirm: throttle(function () {
              this.confirm();
          }, 1000),
          async confirm() {
              try {
                  NProgress.start();
                  let url = '/pic/upload';
                  var formdata = new FormData();
                  formdata.append('source', this.form.source);
                  for (var i = 0; i < this.form.images.length; i++) {
                      formdata.append('images', this.form.images[i]);
                  }
                  if (this.form.remark) {
                      formdata.append('remark', this.form.remark);
                  }

                  let { data: res } = await this.$http[0].post(url, formdata, {
                      headers: {
                          name: localStorage.getItem('ms_username')
                      }
                  });
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }

                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });
                  this.visible_img = false;
                  this.form = {};
                  this.count = '';
                  this.getData();
                  NProgress.done();
              } catch (err) {
                  this.visible_img = false;
                  this.form = {};
                  this.count = '';
                  NProgress.done();
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
              this.visible_img = false;
          },
          async getTagData() {
              try {
                  let url = '/tag/tagAll';
                  let { data: res } = await this.$http[0].get(url, {
                      params: {
                          type: 10
                          // page: this.query.pageIndex,
                          // size: this.query.pageSize
                      }
                  });
                  // console.log('标签列表', res);
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  if (res.data && res.data.length > 0) {
                      res.data.map((v) => {
                          v.disabled = true;
                      });
                      var ret = this.formatData(res.data);
                      console.log('ret', ret);
                      this.tagList = ret;
                      // this.pageTotal = res.data.totalElements || 0;
                  } else {
                      this.tagList = [];
                      // this.pageTotal = res.data.totalElements || 0;
                  }
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          formatData(array) {
              for (let item of array) {
                  item.value = item.id;
                  item.label = item.description;
                  // if (item.name.length >= 20) {
                  //     item.label = item.name.slice(0, 20) + '...';
                  // } else {
                  //     item.label = item.name;
                  // }

                  item.children = [];
                  // 删除返回的没用的属性
                  delete item.type;
                  delete item.createTime;
                  delete item.description;
                  delete item.groupId;
                  delete item.id;
                  delete item.name;
                  delete item.status;
                  delete item.updateTime;
                  delete item.pid;

                  if (item.tblTags && item.tblTags.length != 0) {
                      item.children = item.tblTags;
                      // 删除返回的没用的属性
                      delete item.tblTags;
                      this.formatData(item.children);
                  } else {
                      delete item.children;
                  }
              }
              return array;
          },
          handlechange(value) {
              console.log(value); // 这里的值会输出 value 的一个数组
          },
          // 拒绝
          async handleRefuse() {
              try {
                  let url = '/pic/auditless';
                  let { data: res } = await this.$http[0].get(url, {
                      params: this.$removeField({
                          id: this.form.id
                      })
                  });
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });
                  this.visible = false;
                  this.form = {};
                  this.getData();
              } catch (err) {
                  console.dir(err);
                  this.visible = false;
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          checkRequire(obj) {
              return this.$isEmpty(obj);
          },
          // 通过
          async handlePass() {
              try {
                  let url = '/pic/auditpass';
                  let { data: res } = await this.$http[0].post(
                      url,
                      this.$objTostring(
                          this.$removeField({
                              id: this.form.id,
                              tagIds: this.form.tagIds.join(','),
                              status: this.form.status
                          })
                      ),
                      {
                          headers: {
                              'Content-Type': 'application/x-www-form-urlencoded'
                          }
                      }
                  );
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });
                  this.visible = false;
                  this.form = {};
                  this.getData();
              } catch (err) {
                  this.visible = false;
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          submitChecked: throttle(function () {
              this.checked();
          }, 1000),
          // 提交审核
          async checked() {
              try {
                  let url = '/pic/update';
                  let { data: res } = await this.$http[0].post(
                      url,
                      this.$objTostring(
                          this.$removeField({
                              id: this.form.id,
                              source: this.form.source,
                              tagIds: this.form.tagIds.join(','),
                              status: this.form.status
                          })
                      ),
                      {
                          headers: {
                              'Content-Type': 'application/x-www-form-urlencoded',
                              name: localStorage.getItem('ms_username')
                          }
                      }
                  );
                  console.log(res);
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });
                  this.form = {};
                  this.visible = false;
                  this.getData();
              } catch (err) {
                  console.dir(err);
                  this.visible = false;
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          // 编辑
          handleEdit(index, row) {
              // this.$handleLock.call(this, index, row, this.edit, '/song/lock', row.id);
              this.visible = true;
              this.getEdit(row.id);
              // 获取标签
              this.getTagData();
          },
          // 审核
          handleChecked(index, row) {
              console.log(index, row);
              this.visible = true;
              this.getEdit(row.id);
              // 获取标签
              this.getTagData();
          },
          async getEdit(id) {
              try {
                  let url = '/pic/detail';
                  let { data: res } = await this.$http[0].get(url, {
                      params: this.$removeField({
                          id,
                          auditFlag: this.query.checked ? 2 : null
                      })
                  });
                  console.log(res);
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  // 取值、设置默认值
                  let requiredFields = { id: '', filePath: '', source: '', tagIds: [], status: '' };
                  var ret = this.$chooseFields(res.data, Object.keys(requiredFields), {}, requiredFields);
                  // 中间处理
                  if (ret.filePath != '') {
                      ret.filePath = `${this.baseUrl}/api/stream/audio?path=${ret.filePath}`;
                  }
                  // 赋值
                  this.form = ret;
                  // let { actorName, tags, songName } = res.data;
                  // actorName = actorName.join(',') || [];
                  // tags = tags || [];
                  // this.form = {
                  //     actorName,
                  //     tags,
                  //     songName
                  // };

                  // if (res.data.tags && res.data.tags.length && res.data.tags.length > 0) {
                  //     this.form.tags = res.data.tags;
                  // } else {
                  //     this.form.tags = [];
                  // }
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },

          // 待审核
          handleStatusChange: debounce(function (value) {
              console.log(value);
              // setTimeout(() => {
              //     if (value == true) {
              //         this.$set(this.query, 'pageIndex', 1);
              //         // this.getCheckedData();
              //         this.getData();
              //     } else {
              //         this.$set(this.query, 'pageIndex', 1);
              //         this.getData();
              //     }
              // }, 500);

              this.$set(this.query, 'pageIndex', 1);
              this.getData();
          }, 500),
          getCheckedData() {
              // console.log(4444);
              // this.SET
          },
          ...mapMutations({
              SET_PICTUREMANAGE_DATA: 'SET_PICTUREMANAGE_DATA',
              SET_PICTUREMANAGE_PAGETOTAL: 'SET_PICTUREMANAGE_PAGETOTAL',
              SET_PICTUREMANAGE_QUERY: 'SET_PICTUREMANAGE_QUERY'
          }),
          cancelQuest() {
              if (typeof this.source === 'function') {
                  this.source('终止请求'); //取消请求
              }
          },
          async getData() {
              try {
                  let _this = this;
                  this.cancelQuest(); //在请求发出前取消上一次未完成的请求；
                  NProgress.start();
                  this.disabled = true;
                  let url = '/pic/list';
                  let { data: res } = await this.$http[0].get(url, {
                      cancelToken: new axios.CancelToken(function executor(c) {
                          _this.source = c;
                      }),
                      params: this.$removeField({
                          page: this.query.pageIndex,
                          size: this.query.pageSize,
                          source: this.query.source,
                          format: this.query.format,
                          updateBy: this.query.updateBy ? this.query.updateBy.trim() : this.query.updateBy,
                          status: this.query.status,
                          auditFlag: this.query.checked ? 2 : null,
                          id: this.query.id ? this.query.id.trim() : this.query.id
                      })
                  });

                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }

                  if (res.data.content && res.data.content.length > 0) {
                      res.data.content.map((item) => {
                          item.updateTime = this.$dateFormat(item.updateTime, '', '-');
                      });
                      this.SET_PICTUREMANAGE_DATA(res.data.content);
                      this.SET_PICTUREMANAGE_PAGETOTAL(res.data.totalElements);
                      if (this.query.checked === true) {
                          // var tempQuery = { ...this.query };
                          this.$set(this.query, 'show', true);
                          // this.SET_PICTUREMANAGE_QUERY(tempQuery);
                      } else {
                          this.$set(this.query, 'show', false);
                      }
                  } else {
                      if (this.query.checked === true) {
                          // var tempQuery = { ...this.query };
                          this.$set(this.query, 'show', true);
                          // this.SET_PICTUREMANAGE_QUERY(tempQuery);
                      } else {
                          this.$set(this.query, 'show', false);
                      }
                      this.SET_PICTUREMANAGE_DATA([]);
                      this.SET_PICTUREMANAGE_PAGETOTAL(0);
                  }

                  NProgress.done();
                  this.disabled = false;
              } catch (err) {
                  if (this.query.checked === true) {
                      // var tempQuery = { ...this.query };
                      this.$set(this.query, 'show', true);
                      // this.SET_PICTUREMANAGE_QUERY(tempQuery);
                  } else {
                      this.$set(this.query, 'show', false);
                  }
                  this.SET_PICTUREMANAGE_DATA([]);
                  this.SET_PICTUREMANAGE_PAGETOTAL(0);

                  console.dir(err);
                  NProgress.done();
                  this.disabled = false;
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
              // this.tableData = [];
              // this.pageTotal = 0;
          },
          // 触发搜索按钮
          // handleSearch() {
          //     this.$set(this.query, 'pageIndex', 1);
          //     this.getData();
          // },
          // 搜索相关: 防抖处理
          handleSearch: debounce(function () {
              this.$set(this.query, 'pageIndex', 1);
              this.getData();
          }, 300),

          // 删除操作
          handleDelete(index, row) {
              // 二次确认删除
              this.$confirm('确定要删除吗？', '提示', {
                  type: 'warning'
              })
                  .then(() => {
                      this.$message.success('删除成功');
                      this.tableData.splice(index, 1);
                  })
                  .catch(() => {});
          },
          // 分页导航
          handlePageChange(val) {
              this.$set(this.query, 'pageIndex', val);
              this.getData();
          },
          handleSizeChange(val) {
              this.$set(this.query, 'pageSize', val);
              this.getData();
          }
      }
  };
</script>

<style lang="scss">
  .el-image-viewer__wrapper {
      .el-image-viewer__canvas {
          .el-image-viewer__img {
              max-height: 40% !important;
              max-width: 40% !important;
          }
      }
  }
  #picture_manage {
      .uploadFile {
          .el-form-item__content {
              display: flex;
              .btn {
                  position: relative;
                  display: inline-block;
                  text-align: center;
                  color: #fff;
                  text-decoration: none;
                  width: 80px;
                  // height: 32px;
                  // line-height: 32px;
                  background: #409eff;
                  border-radius: 3px;
                  font-size: 12px;
                  vertical-align: middle;
                  margin-left: 10px;
                  input[name='file'] {
                      opacity: 0;
                      width: 100%;
                      height: 100%;
                      position: absolute;
                      left: 0;
                  }
              }
          }
      }

      .table-header {
          .cell {
              white-space: nowrap !important;
          }
      }
      .handle-box {
          margin-bottom: 20px;
          .el-form {
              display: grid;
              grid-auto-flow: column;
              justify-content: flex-start;
              .el-form-item {
                  width: 95%;
                  .el-form-item__content {
                      .el-select,
                      .handle-input {
                          width: 100%;
                      }
                  }
              }
          }
      }

      // .handle-input {
      //     width: 120px;
      //     display: inline-block;
      // }
      .table {
          width: 100%;
          font-size: 14px;
      }
      .red {
          color: #ff0000;
      }
      .mr10 {
          margin-right: 10px;
      }
      .table-td-thumb {
          display: block;
          margin: auto;
          width: 40px;
          height: 40px;
      }
  }
</style>
